<template>
	<el-dialog v-model="control.visible" :z-index="997">
		<section v-if="control.logintype=='mobile'">
			<div class="xp-title">{{$t('xclogin.login.label_welcome_login')}} {{config[$i18n.locale+'_projectname']}}</div>
			<el-form ref="form" :model="controlmobile.form" :rules="controlmobile.rules">
				<el-form-item label="" prop="mobile">
					<el-input v-model="controlmobile.form.mobile" autocomplete="off" :placeholder="$t('xclogin.login.msg_input_mobile')"
						size="large" />
				</el-form-item>
				<el-form-item label="" prop="captcha">
					<el-row>
						<el-col :span="18"><el-input class="xp-captcha" v-model="controlmobile.form.captcha" autocomplete="off"
								:placeholder="$t('xclogin.login.btn_get_ccode')" size="large" /></el-col>
						<el-col :span="6">
							<xa-el-code ref="code" :start-text="$t('xclogin.login.msg_get_ccode')" :end-text="$t('xclogin.login.msg_reget_ccode')"
								:seconds="controlmobile.seconds" @start="controlmobile_startCode"></xa-el-code>
						</el-col>
					</el-row>
				</el-form-item>
				<div class="xp-errormsg" v-if="controlmobile.errmsg!=null">{{controlmobile.errmsg}}</div>
				<el-button type="primary" size="large" class="xp-button-login" @click="controlmobile_clickLogin"> {{$t('xclogin.login.btn_login')}}
				</el-button>
			</el-form>
			<div class="xp-agreement">
				<el-checkbox v-model="controlagree.isAgree" size="large" true-value='Y' false-value="N" />
				{{$t('xclogin.login.msg_please_agree')}}<text class="link">《{{$t('xclogin.me.label_servicepolicy')}}》</text> <text class="link">《{{$t('xclogin.me.label_privatepolicy')}}》</text>
			</div>
			<!-- <div class="xp-button-switch">
				<el-button type="info" @click="control_clickSwitch('qcode')">微信扫码登录</el-button>
			</div> -->
		</section>

		<section v-if="control.logintype=='qcode'">
			<div class="xp-title">微信扫码登录</div>
			<el-form :model="controlqcode.form">


			</el-form>
			<div class="xp-agreement">
				<el-checkbox v-model="controlagree.isAgree" label="" size="large" true-value='Y'
					false-value="N" />
				{{$t('xclogin.login.msg_please_agree')}}<text class="link">《用户协议》</text>和<text class="link">《隐私政策》</text>
			</div>
			<div class="xp-button-switch">
				<el-button type="info" @click="control_clickSwitch('mobile')">手机验证码登录</el-button>
			</div>
		</section>
	</el-dialog>


	<el-dialog v-model="controlagree.visible" :z-index=998 top="30vh">
		{{$t('xclogin.login.msg_please_agree')}}<text class="link">《{{$t('xclogin.me.label_servicepolicy')}}》</text> <text class="link">《{{$t('xclogin.me.label_privatepolicy')}}》</text>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="controlagree_cancel">{{$t('xc.btn_cancel')}}</el-button>
				<el-button type="primary" @click="controlagree_confirm">
					{{$t('xclogin.login.msg_please_agree')}}
				</el-button>
			</div>
		</template>
	</el-dialog>

</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import xcCloginUtils from '@/library/xcore/js/XcCloginUtils';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		props: {
			modelValue: {
				type: Object,
				default: []
			},
			data: {
				type: Object,
				default: []
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
		},
		data() {
			var validatorPhone = function(rule, value, callback) {
				if (value === '') {
					callback(new Error('手机号不能为空'))
				} else if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
						value)) {
					callback(new Error('手机号格式错误'))
				} else {
					callback()
				}
			};
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {},
				sr: {},
				control: {
					visible: false,
					logintype: 'mobile',
				},
				controlmobile: {
					seconds: 10,
					errmsg: "",
					form: {
						mobile: "",
						captcha: "",
					},
					rules: {
						mobile: {
							type: 'string',
							validator: validatorPhone,
							trigger: 'blur',
							message: this.$t('xc.rules_required_input')
						},
						captcha: {
							required: true,
							message: this.$t('xc.rules_required_input')
						},
					},
				},
				controlqcode: {
					agreement: 'N',
					form: {

					}
				},
				controlagree: {
					visible: false,
					isAgree: 'N',
					targetMethod: null,
				}
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
			},
			public_show() {
				let that = this;
				that.control.visible = true;
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			control_click() {
				let that = this;
				that.$emit('update:modelValue', "Hello World!");
			},
			controlmobile_startCode() {
				let that = this;
				if (that.controlmobile.form.mobile == null || that.controlmobile.form.mobile == '') {
					xcViewUtils.message_error("手机号码不能为空");
					return;
				}

				if (that.$refs.code.canGetCode) {
					xcHttpUtils.post("sms/send", {
						mobile: that.controlmobile.form.mobile,
						event: "mobilelogin"
					}, function(res) {
						xcViewUtils.message_success("验证码已发送");
						that.$refs.code.start();
					}, function(e) {
						xcViewUtils.message_error(e);
					});
				} else {
					xcViewUtils.message_success('倒计时结束后再发送');
				}
			},
			controlmobile_clickLogin() {
				let that = this;

				that.$refs.form.validate().then(res => {
					if(that.controlagree.isAgree=='N'){
						that.controlagree.targetMethod = "mobile";
						that.controlagree.visible = true;
						return;
					}
					
					xcHttpUtils.post("/" + config.addons + '/xc_clogin_api/mobilelogin', {
						"mobile": that.controlmobile.form.mobile,
						"captcha": that.controlmobile.form.captcha
					}, function(res) {
						let token = res.userinfo.token;
						xcCloginUtils.setSessionToken(token);
						
						that.control.visible = false;
					}, function(errmsg) {
						that.controlmobile.errmsg = errmsg;
						return false;
					});
				});

			},
			control_clickSwitch(logintype) {
				let that = this;
				that.control.logintype = logintype;
			},
			controlagree_cancel() {
				let that = this;
				that.controlagree.visible = false;
			},
			controlagree_confirm() {
				let that = this;
				that.controlagree.visible = false;
				that.controlagree.isAgree = 'Y';
				switch (that.controlagree.targetMethod) {
					case "mobile":
						that.controlmobile_clickLogin();
						break;
					case "qcode":
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.el-dialog {
		padding: $uni-font-size-lg;

	}

	.xp-title {
		text-align: center;
		font-size: $uni-font-size-subtitle;
		padding: $uni-spacing-row-lg;
		margin-bottom: 30px;
	}

	.xp-button-login {
		width: 100%;
	}

	.xp-agreement {
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}

	.xp-button-switch {
		text-align: center;
		padding-top: 40px;
	}

	.xp-errormsg {
		color: red;
		padding-bottom: $uni-spacing-row-lg;
	}

</style>